<template>
  <div class="personnelAdd">
    <van-collapse v-model="activeName">
      <van-collapse-item title="职业类型">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in serverLiset"
          :key="index"
          @click="checkActive(item, index)"
          :class="isActive == index && isActive !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="学历">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in educaLiset"
          :key="index"
          @click="checkActive2(item, index)"
          :class="isActive2 == index && isActive2 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="民族">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in nationLiset"
          :key="index"
          @click="checkActive3(item, index)"
          :class="isActive3 == index && isActive3 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="婚姻状况">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in marriageLiset"
          :key="index"
          @click="checkActive4(item, index)"
          :class="isActive4 == index && isActive4 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        ></van-collapse-item
      >
      <van-collapse-item title="星座">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in constellationLiset"
          :key="index"
          @click="checkActive5(item, index)"
          :class="isActive5 == index && isActive5 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        ></van-collapse-item
      >
      <van-collapse-item title="生肖">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in zodiacLiset"
          :key="index"
          @click="checkActive6(item, index)"
          :class="isActive6 == index && isActive6 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="工作年限">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in yearsLiset"
          :key="index"
          @click="checkActive7(item, index)"
          :class="isActive7 == index && isActive7 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        >
      </van-collapse-item>
      <van-collapse-item title="主要技能">
        <van-tag
          color="#a3a0a0"
          plain
          round
          v-for="(item, index) in skillLiset"
          :key="index"
          @click="checkActive8(item, index)"
          :class="isActive8 == index && isActive8 !== false ? 'active' : ''"
          >{{ item }}</van-tag
        ></van-collapse-item
      >
      <div>
        <span class="yxtext" v-if="arr.length">已 选 :</span>
        <van-tag
          closeable
          plain
          round
          v-for="(item, index) in arr"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </van-collapse>
    <!-- 按钮 -->
    <div class="housebtn">
      <van-button round type="info" color="#3F51B5" @click="eliminate"
        >清除条件</van-button
      >
      <van-button round type="info" color="#3F51B5" @click="goScreening"
        >选择条件</van-button
      >
    </div>
  </div>
</template>
<script>
import { getoccupation } from '@/api/home.js'
export default {
  name: 'personnelAdd',
  data () {
    return {
      arr: [],
      show: false,
      activeName: [],
      serverLiset: [], // 职业类型
      educaLiset: [], // 学历类型
      nationLiset: [], // 民族类型
      marriageLiset: [], // 婚姻状况
      constellationLiset: [], // 星座
      zodiacLiset: [], // 生肖
      yearsLiset: [], // 工作年限
      skillLiset: [], // 主要技能
      isActive: false, // 职业类型高亮
      isActive2: false, // 学历高亮
      isActive3: false, // 民族类型高亮
      isActive4: false, // 婚姻状况高亮
      isActive5: false, // 星座高亮高亮
      isActive6: false, // 生肖高亮高亮
      isActive7: false, // 工作年限高亮
      isActive8: false // 主要技能高亮
    }
  },
  created () {
    // 初始化渲染
    this.personneServers()
  },
  mounted () {
  },
  methods: {
    // 获取数据
    async personneServers () {
      try {
        const res = await getoccupation()
        // console.log(res.data[0])
        this.serverLiset = res.data[0].tags
        this.educaLiset = res.data[0].educa
        this.nationLiset = res.data[0].nation
        this.marriageLiset = res.data[0].marriage
        this.constellationLiset = res.data[0].constellation
        this.zodiacLiset = res.data[0].zodiac
        this.yearsLiset = res.data[0].years
        this.skillLiset = res.data[0].skill
      } catch (err) {
        this.$toast.fail('获取失败')
      }
    },
    // 点击高亮
    checkActive (item, index) {
      this.isActive = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive2 (item, index) {
      this.isActive2 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive3 (item, index) {
      this.isActive3 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive4 (item, index) {
      this.isActive4 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive5 (item, index) {
      this.isActive5 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive6 (item, index) {
      this.isActive6 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive7 (item, index) {
      this.isActive7 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    checkActive8 (item, index) {
      this.isActive8 = index
      const i = this.arr.indexOf(item)
      if (i === -1) {
        this.arr.push(item)
      }
    },
    // 选择条件后跳转
    goScreening () {
      if (this.arr.length < 5) {
        return this.$toast.fail('请选择必要条件')
      }
      this.$router.push('/filter')
    },
    // 清除条件
    eliminate () {
      this.arr = []
      this.isActive = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
    }
  }
}
</script>
<style lang="less" scoped>
.personnelAdd {
  /deep/.van-cell__title {
    margin-top: 30px;
  }
  /deep/ .van-cell {
    font-size: 30px;
    font-weight: 700;
  }
  .van-tag {
    padding: 10px 30px;
    margin: 8px 10px;
  }
  /deep/ .van-cell {
    padding-left: 20px;
    padding-top: 10px;
  }
  .active {
    color: #3f51b5 !important;
  }
  .housebtn {
    display: flex;
    justify-content: center;
    /deep/ .van-button {
      width: 320px;
      height: 70px;
      margin: 30px 28px;
    }
  }
  .yxtext {
    font-size: 30px;
    font-weight: 700;
    margin-left: 30px;
  }
}
</style>
